<template>
    <div class="jx-content" id="TrainingEnvironment">
        <el-row :gutter="50">
            <el-col>
                <div class="el-col-add" @click="AddTraining(1)">
                    <i class="iconfont icon-jiahao"></i>
                    <p>添加环境实训</p>
                </div>
            </el-col>
            <el-col :span="6" v-for="(item, index) in courseList"  :key="index">
                <div class="el-col-content" @mouseenter="hoverImg(item)"  @mouseleave="leaveImg(item)" @click="GoDetail(item)">
                    <div class="content-img">
                        <img :src="item.iconUrl">
                        <i class="iconfont icon-Group-" @click.stop="DeleteList(item.trainingId)"></i>
                    </div>
                    <div class="content-box">
                        <div class="content-title">
                            <span v-text="item.trainingName"></span>
                            <i class="iconfont icon-bianji" @click.stop="AddTraining(2,item)"></i>
                        </div>
                        <div class="content-name" v-text="item.trainingSource"></div>
                        <div class="content-text" v-text="item.description"></div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-dialog :close-on-click-modal="false" class="dialog-add-distribution" title="添加/修改实训环境" :visible.sync="dialogMirrorInfo" v-if="dialogMirrorInfo" width="820px" >
            <el-form  label-width="100px" :rules="MirrorFormRules" :model="MirrorForm" ref='MirrorForm'>
                <el-form-item label="环境名称：" prop="MirrorName">
                    <el-input type="text" v-model="MirrorForm.MirrorName" maxlength="15" @input="MirrorNameInput"></el-input>
                    <p style="position:absolute; left:240px; top: 12px;"> {{MirrorForm.MirrorNameNum}}/15</p>
                </el-form-item>
                <!-- <el-form-item label="镜像类型：" prop="MirrorTypeValue">
                    <el-select v-model="MirrorForm.MirrorTypeValue" placeholder="请选择镜像类型">
                        <el-option
                            v-for="item in MirrorForm.MirrorTypeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item> -->
                <div>
                    <span class="label" style="margin:6px 0 0px 8px"><span style="color:#F56C6C">*</span> 环境图标：</span>
                    <div class="distribution-swpier">
                        <swiper :options="swiperDialogOption" >
                            <swiper-slide v-for="(item, index) in iconListData" :key="index">
                                <div class="distribution-box" @click="IconChange(item.icon)">
                                    <img :src="item.iconUrl" />
                                    <i class="iconfont icon-zhengque" v-if="item.icon == MirrorForm.iconId"></i>
                                </div>
                            </swiper-slide>
                        </swiper>
                        <div class="swiper-btn swiper-button-prev" slot="button-prev" v-show="iconListData.length > 5">
                            <i class="iconfont icon-xiangzuo-copy"></i>
                        </div>
                        <div class="swiper-btn swiper-button-next" slot="button-next" v-show="iconListData.length > 5">
                            <i class="iconfont icon-xiangyou"></i>
                        </div>
                    </div>
                </div>
                <div class="clear-fix"></div>
                <el-form-item label="环境简介：" prop="MirrorDesc">
                    <el-input type="textarea" v-model="MirrorForm.MirrorDesc" maxlength="200" @input="MirrorDescInput"></el-input>
                    <p style="position:absolute; left: 610px; bottom: 0px;"> {{MirrorForm.MirrorDescNum}}/200</p>
                </el-form-item>
                <div class="footer" style="text-align:center;">
                    <el-button class="button-style saveBtn" @click="MirrorFormSave('MirrorForm')">保存</el-button>
                </div>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default{
        components: {
            swiper,
            swiperSlide
        },
        data(){
            return{
                courseList:[],
                roleId:'',
                // 管理弹窗轮播组件data
                swiperDialogOption: {
                    slidesPerView: 5,
                    spaceBetween: 24,
                    initialSlide: 1,
                    loop: true,
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                },
                iconListData: '',
                // 镜像信息弹窗
                dialogMirrorInfo: false,
                // 镜像弹窗头部信息
                distributionText: '',
                // 镜像表单
                MirrorForm: {
                    // 镜像名称
                    MirrorName: '',
                    // 镜像名称长度
                    MirrorNameNum: 20,
                    // // 镜像类型
                    // MirrorTypeOptions: [
                    //     {
                    //         label: '语言类',
                    //         value: 1
                    //     },
                    //     {
                    //         label: 'Hadoop生态',
                    //         value: 2
                    //     },
                    //     {
                    //         label: '机器学习',
                    //         value: 3
                    //     }
                    // ],
                    // MirrorTypeValue: '',
                    // 镜像简介
                    MirrorDesc: '',
                    // 镜像简介长度
                    MirrorDescNum: 200,
                    // 选中的镜像图标ID
                    iconId: '',
                    // 镜像ID
                    imageId: ''
                },
                MirrorFormRules:{
                    MirrorName: [
                        { required: true, message: '请输入环境名称', trigger: 'blur' },
                    ],
                    MirrorDesc: [
                        { required: true, message: '请输入环境简介', trigger: 'blur' },
                    ]
                },
                // 添加或者修改标记
                AddOrModify:''
            }
        },
        created() {
            let self = this
            // 制作环境实训列表
            self.InitCreateTraining()
        },
        methods:{
            // 制作环境实训列表
            InitCreateTraining(){
                let self = this
                self.$http.get('/tes/training/unpublished').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        // 列表赋值
                        self.courseList = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 添加实训环境弹窗
            AddTraining(tag, item){
                // tag 1.添加 2.修改
                let self = this
                // 添加修改标记赋值
                self.AddOrModify = tag
                // 初始化图标集合
                self.MirrorForm.MirrorName = ''
                self.MirrorForm.MirrorNameNum = 15
                self.MirrorForm.iconId = ''
                self.MirrorForm.MirrorDesc = ''
                self.MirrorForm.MirrorDescNum = 200
                self.swiperDialogOption.initialSlide = 1
                self.iconListData = ''
                // 查询实训图标列表
                self.$http.get('/tes/training/icon').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        // 赋值环境实训列表icon
                        self.iconListData = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
                if(tag == 1){
                    // self.distributionText = '添加实训镜像'
                    // self.MirrorForm.MirrorName = ''
                    // self.MirrorForm.iconId = ''
                    // self.MirrorForm.MirrorDesc = ''
                    // self.MirrorForm.MirrorNameNum = 15
                    // self.MirrorForm.MirrorDescNum = 50
                    self.dialogMirrorInfo = true
                }else{
                    // self.distributionText = '修改实训镜像'
                    self.$http.get('/tes/training/'+item.trainingId).then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            let iconIdIndex
                            self.MirrorForm.MirrorName = res.data.trainingName
                            self.MirrorForm.iconId = res.data.icon
                            self.MirrorForm.MirrorDesc = res.data.description
                            self.MirrorForm.imageId = res.data.id
                            self.MirrorForm.MirrorNameNum = 15 - res.data.trainingName.length
                            self.MirrorForm.MirrorDescNum = 200 - res.data.description.length
                            iconIdIndex = self.indexOfFn(self.iconListData,self.MirrorForm.iconId)
                            self.swiperDialogOption =  {
                                slidesPerView: 5,
                                spaceBetween: 24,
                                initialSlide: iconIdIndex,
                                loop: false,
                                navigation: {
                                    nextEl: '.swiper-button-next',
                                    prevEl: '.swiper-button-prev',
                                },
                            }
                            self.dialogMirrorInfo = true
                        }else{
                            self.$message.error(res.message)
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                }
            },
            indexOfFn(arr,item){
                for(let i = 0; i < arr.length; i++){
                    if(arr[i].icon == item){
                        return i;
                    }
                }
            },
            // 图标切换
            IconChange(id){
                let self = this
                self.MirrorForm.iconId = id
            },
            // 镜像名称
            MirrorNameInput(){
                let self = this
                let MirrorTextLength = self.MirrorForm.MirrorName.length
                self.MirrorForm.MirrorNameNum = 15 - MirrorTextLength
            },
            // 镜像简介
            MirrorDescInput(){
                let self = this
                let MirrorTextLength = self.MirrorForm.MirrorDesc.length;
                self.MirrorForm.MirrorDescNum = 50 - MirrorTextLength
            },
            // 镜像保存OR修改
            MirrorFormSave(form){
                let self = this
                if(self.AddOrModify == 1){
                    // 添加
                    self.$refs[form].validate((valid) => {
                        if (valid) {
                            if(self.MirrorForm.iconId == ''){
                                self.$message.error('请选择环境图标')
                                return
                            }
                            self.$http.post('/tes/training',{
                                'trainingName': self.MirrorForm.MirrorName,
                                'icon': self.MirrorForm.iconId,
                                'description': self.MirrorForm.MirrorDesc
                            }).then(response => {
                                let res = response.data
                                if(res.code == '200'){
                                    self.$message({
                                        message: '添加成功',
                                        type: 'success'
                                    })

                                    self.dialogMirrorInfo = false
                                    // 初始化实训环境
                                    self.InitCreateTraining()

                                }else{
                                    self.$message.error(res.message)
                                }
                            }).catch(err => {
                                console.log(err)
                            })
                        }
                    })
                }else{
                    // 修改
                    self.$refs[form].validate((valid) => {
                        if (valid) {
                            if(self.MirrorForm.iconId == ''){
                                self.$message.error('请选择环境图标')
                                return
                            }
                            self.$http.put('/tes/training/'+self.MirrorForm.imageId,{
                                'trainingName': self.MirrorForm.MirrorName,
                                'icon': self.MirrorForm.iconId,
                                'description': self.MirrorForm.MirrorDesc
                            }).then(response => {
                                let res = response.data
                                if(res.code == '200'){
                                    self.$message({
                                        message: '修改成功',
                                        type: 'success'
                                    })

                                    self.dialogMirrorInfo = false
                                    // 初始化实训环境
                                    self.InitCreateTraining()

                                }else{
                                    self.$message.error(res.message)
                                }
                            }).catch(err => {
                                console.log(err)
                            })
                        }
                    })
                }

            },
            // 删除列表
            DeleteList(id){
                let self = this
                self.$confirm('是否删除实训环境?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.$http.delete('/tes/training/'+id).then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })

                            // 重新渲染列表
                            self.InitCreateTraining()
                        }else{
                            self.$message.error(res.message)
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                }).catch(() => {
                })
            },
            GoDetail(item) {
                let self = this

                // 实训存储集合
                let TrainingData = {}
                // 实训ID
                TrainingData.trainingId = item.trainingId
                TrainingData.trainingName = item.trainingName
                self.$localstorage.putLocalStorage('TrainingData', TrainingData)

                self.$router.push({
                    path: '/Admin/VirtualManage/TrainingEnvironmentEdit'
                })
            },
            //鼠标经过变色
            hoverImg(item){
               // item.iconUrl = item.iconUrl+'.fan.png'
            },
            //鼠标离开变色
            leaveImg(item){
               // item.iconUrl = item.iconUrl.substr(item.iconUrl,item.iconUrl.lastIndexOf('.', item.iconUrl.lastIndexOf('.') - 1) );
            },
            //关闭弹窗
            closeDialog(){
                let self =this
                this.$nextTick(function(){
                    self.$refs.MirrorForm.resetFields();
                })
            },
        }
    }
</script>

<style lang="scss">
    #TrainingEnvironment{
        // 镜像信息弹窗
        .dialog-add-distribution{
            .el-dialog__body{
                min-height:350px;
            }
            .el-form{
                .el-form-item{
                    position: relative;
                    .el-form-item__content{
                        height: auto;
                    }
                    .el-input{
                        .el-input__inner{
                            width:230px;
                        }
                    }
                    .el-textarea{
                        height: 180px;
                        .el-textarea__inner{
                            width:600px;
                            resize: none;
                        }
                    }
                }
            }
            .distribution-swpier{
                position: relative;
                width: 700px;
                height: 64px;
                margin-bottom: 35px;
                margin-left: 55px;
                margin-top: 15px;
                .swiper-btn{
                    background-image: none;
                    outline: 0;
                    top: 46px;
                    i{
                        font-size: 20px;
                        color: #b1b1b1;
                        &:hover{
                            color: #474747;
                        }
                    }
                }
                .swiper-button-prev{
                    left: -35px;
                }
                .swiper-button-next{
                    right: -35px;
                }
            }
            .distribution-box{
                position: relative;
                width: 100%;
                height: 64px;
                line-height: 64px;
                background: #485877;
                border-radius: 5px;
                text-align: center;
                cursor: pointer;
                box-sizing: border-box;
                img{
                    width: 100%;
                }
                i{
                    position: absolute;
                    bottom: 28px;
                    right: 8px;
                    font-size: 14px;
                    color: #3fdb9b;
                    width: 14px;
                    height: 14px;
                }
            }
        }
    }
</style>
<style scoped lang="scss">
    @import "./../../../styles/ypublic.scss";
    .jx-content{
        background: none;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        margin-top: 30px;
    }
    #TrainingEnvironment{
        padding: 20px 45px;
        .el-row{
            .el-col{
                width:25%;
                height:315px;
                margin-bottom: 40px;
                .el-col-add{
                    width: 100%;
                    height: 100%;
                    text-align: center;
                    background: #fff;
                    border: dashed 1px #d9d9d9;
                    cursor: pointer;

                    i{
                        font-size: 16px;
                        margin-top: 130px;
                        display: block;
                    }
                    p{
                        font-size: 14px;
                        color: #8f8f8f;
                    }
                    &:hover{
                        border: 1px dashed #385899;
                        transform: scale(1.05);
                        transition: transform .3s;
                        i{
                            color: #385899;
                        }
                        p{
                            color: #385899
                        }
                    }
                }
                .el-col-content{
                    width: 100%;
                    cursor: pointer;
                    transition: all 0.3s;
                    &:hover{
                        transform: scale(1.05);
                        transition: transform .3s;
                        cursor: pointer;
                        box-shadow: 0 0 20px  #e0e0e0;
                    }
                    .content-img{
                        position: relative;
                        height: 130px;
                        line-height: 130px;
                        text-align: center;
                        background: #485f8c;
                        border-radius: 5px 5px 0 0;
                        img{
                            width: 100%;
                        }
                        i{
                            position: absolute;
                            right: 10px;
                            top: 10px;
                            color: #fff;
                            line-height: 1;
                        }
                    }
                    .content-box{
                        height: 180px;
                        background: #fff;
                        border-radius: 0 0 5px 5px;
                        overflow: hidden;
                        box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
                        .content-title{
                            font-size: 15px;
                            line-height: 1.5;
                            text-align: center;
                            margin-top: 15px;
                            padding: 0 20px;
                            span{
                                color: #485f8c;
                                font-weight: bold;
                            }
                            i{
                                color: #385899;
                                font-size: 20px;
                                margin-left: 5px;
                            }
                        }
                        .content-name{
                            text-align: center;
                            font-size: 14px;
                            line-height: 1;
                            color: #888888;
                            margin-top: 6px;
                        }
                        .content-text{
                            margin-top: 8px;
                            font-size: 12px;
                            color: #888888;
                            padding: 0 25px;
                            height: 37px;
                            line-height: 18px;
                            overflow: hidden;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;

                        }
                    }
                }
            }
        }
    }
</style>


